<template>
  <el-row style="display: flex; flex-wrap: wrap">
    <el-col
      v-if="!it.formHide || it.formHide === false"
      v-for="(it, index) in formInput instanceof Array
        ? formInput
        : formInput()"
      :key="index"
      :xs="!it.formHide || it.formHide === false ? 0 : 24"
      :sm="!it.formHide || it.formHide === false ? 24 : 0"
      :md="!it.formHide || it.formHide === false ? 12 : 0"
      :lg="
        it.type === 'textarea' || it.buttonArr
          ? it.lg == 'auto'
            ? 24 / spanNum
            : 24
          : 24 / spanNum
      "
    >
      <el-form-item
        v-if="it.type === 'input'"
        v-show="it.show ? it.show(it) : true"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-col :xs="24" :sm="24" :md="it.buttonArr ? 12 : 24">
          <el-input
            style="float: left; width: 60%"
            v-if="!it.autocomplete"
            v-model="ruleForm[it.name]"
            :maxlength="it.maxlength"
            :show-word-limit="it.maxlength ? true : false"
            :placeholder="it.placeholder"
            :type="it.inputType ? it.inputType : 'text'"
            :min="it.min ? it.min : ''"
            :max="it.max ? it.max : ''"
            :disabled="it.disabled"
            @blur="blurVal(it)"
            @focus="focus(it)"
            @change="changeNum(it)"
          />
          <el-autocomplete
            v-else
            v-model="ruleForm[it.name]"
            class="inline-input"
            style="float: left; width: 60%"
            :fetch-suggestions="it.querySearch"
            :trigger-on-focus="false"
            :disabled="it.disabled"
            :placeholder="it.placeholder"
            @select="it.fun"
          />
          <el-button
            v-if="it.button"
            type="primary"
            @click="it.button.fun"
            style="float: left; margin-left: 10px"
            >{{ it.button.name }}</el-button
          >
        </el-col>
        <el-col
          v-if="it.buttonArr"
          style="margin-left: 10px"
          :xs="24"
          :sm="24"
          :md="8"
        >
          <el-button
            v-for="(ib, i) in it.buttonArr"
            :key="i"
            type="primary"
            @click="ib.fun"
            >{{ ib.name }}</el-button
          >
        </el-col>
      </el-form-item>
      <el-form-item
        v-if="it.type === 'input-scope'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
        :class="it.isRequired ? 'is-required' : ''"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-col :xs="24" :sm="24" :md="it.buttonArr ? 12 : 24">
          <div
            style="width: 60%; display: flex; justify-content: space-between"
          >
            <AppNumberInput
              v-model="ruleForm[`${it.name}Min`]"
              :placeholder="it.placeholder"
              :precision="it.precision || 0"
              :length="it.maxlength || 8"
              :min="0"
              :max="it.max || 99999999"
              style="width: 48%"
            />
            ~
            <AppNumberInput
              v-model="ruleForm[`${it.name}Max`]"
              :placeholder="it.placeholder"
              :precision="it.precision || 0"
              :length="it.maxlength || 8"
              :min="0"
              :max="it.max || 99999999"
              style="width: 48%"
            />
          </div>
        </el-col>
      </el-form-item>
      <el-form-item
        v-if="it.type === 'input-array'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
        :required="it.isRequired"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <div v-for="(v, i) in ruleForm[`${it.name}Array`]">
          <el-form-item :prop="`${it.name}Array`">
            <el-input
              style="float: left; width: 60%; margin-bottom: 5px"
              v-if="!it.autocomplete"
              v-model="ruleForm[`${it.name}Array`][i].value"
              :name="`${it.name}Array`"
              :maxlength="it.maxlength"
              :show-word-limit="it.maxlength ? true : false"
              :placeholder="it.placeholder"
              :type="it.inputType ? it.inputType : 'text'"
              :min="it.min ? it.min : ''"
              :max="it.max ? it.max : ''"
              :disabled="it.disabled"
              @blur="blurVal(it)"
              @focus="focus(it)"
              @change="changeNum(it)"
            />
            <i
              class="input-icon el-icon-remove-outline"
              v-if="ruleForm[`${it.name}Array`].length !== 1"
              @click="it.removeInput(it, i)"
            ></i>
            <i
              class="input-icon el-icon-circle-plus-outline"
              v-if="
                ruleForm[`${it.name}Array`].length === 1 ||
                i === ruleForm[`${it.name}Array`].length - 1
              "
              @click="it.addInput(it, i)"
            ></i>
          </el-form-item>
        </div>
        <!-- 新增,显示添加退款原因 -->
        <div
          style="clear: both; margin: 0 0 40px 0; font-size: 14px"
          v-if="it.reason"
        >
          <span @click="it.addInput(it)" style="color: #1890ff; cursor: pointer"
            >添加退款原因</span
          ><span style="color: #7f7f7f; font-size: 12px; margin-left: 5px"
            >最多可添加15个</span
          >
        </div>
      </el-form-item>
      <el-form-item
        v-if="it.type === 'gaode-map'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-col :xs="24" :sm="24" :md="it.buttonArr ? 12 : 24">
          <gaode-map
            :key="GaodeMapKey"
            v-model="ruleForm[it.name]"
            :value="ruleForm[it.name]"
          />
        </el-col>
      </el-form-item>
      <el-form-item
        v-if="it.type === 'selectTable'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-input validate-event disabled v-model="ruleForm[it.name]"
          ><el-button
            :disabled="it.disabled"
            slot="append"
            :icon="it.icon || 'el-icon-plus'"
            size="mini"
            @click="it.fun(ruleForm[it.name])"
          ></el-button
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="it.type === 'inputS'"
        :label="it.label"
        :label-width="formLabelWidth"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-form-item :prop="it.list[0].prop">
            <el-input
              v-model="ruleForm[it.list[0].name]"
              autocomplete="off"
              :placeholder="it.list[0].placeholder"
              type="number"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <div style="text-align: center">≤ X ≤</div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-form-item :prop="it.list[1].prop">
            <el-input
              v-model="ruleForm[it.list[1].name]"
              autocomplete="off"
              :placeholder="it.list[1].placeholder"
              type="number"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item
        v-if="it.type === 'inputNumber'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <AppNumberInput
          v-model="ruleForm[it.name]"
          :placeholder="it.placeholder"
          :precision="it.precision || 0"
          :length="it.maxlength || 8"
          :min="0"
          :max="it.max || 99999999"
          style="width: 60%"
        />
      </el-form-item>
      <el-form-item
        v-if="it.type === 'selectMultiple'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-select
          v-model="ruleForm[it.name]"
          :placeholder="it.placeholder"
          multiple
          :collapse-tags="!'tags' in it || it.tags === true"
          value-key="label"
          style="float: left; width: 60%"
          :filterable="true"
        >
          <el-option
            v-for="it in it.list"
            :key="it.value"
            :label="it.name"
            :value="it.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'select'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-select
          clearable
          v-model="ruleForm[it.name]"
          :remote="it.remoteMethod ? true : false"
          :remote-method="it.remoteMethod ? it.remoteMethod : () => {}"
          :placeholder="it.placeholder"
          :disabled="it.disabled"
          style="float: left; width: 60%"
          :filterable="true"
          @change="'fun' in it ? it.fun() : () => {}"
          :multiple="it.multiple"
          :collapse-tags="it.multiple"
        >
          <el-option
            v-for="itJ in ArrayTypeOf(it.list)"
            :key="itJ.value"
            :label="itJ.name"
            :value="itJ.value"
            :disabled="itJ.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="it.type === 'radio' && (it.show ? it.show(it) : true)"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
        style="text-align: left"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-radio-group
          v-if="it.fun"
          v-model="ruleForm[it.name]"
          @change="it.fun"
        >
          <el-radio
            v-for="(item, index) in it.list"
            :key="index"
            :label="item.value"
            :disabled="it.disabled"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
        <el-radio-group v-else v-model="ruleForm[it.name]">
          <el-radio
            v-for="(item, index) in it.list"
            :key="index"
            :label="item.value"
            :disabled="it.disabled"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
        <!-- 新增 - 自营商品列表 - 单选框提示 -->
        <template v-if="it.msgTip">
          <div style="color: #999; font-size: 12px">{{ it.msgTip }}</div>
        </template>
      </el-form-item>
      <el-form-item
        v-if="it.type === 'checkbox'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
        style="text-align: left"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-checkbox
          :disabled="it.disabled"
          v-for="(item, index) in it.list"
          :key="index"
          v-model="ruleForm[item.value]"
          >{{ item.name }}</el-checkbox
        >
      </el-form-item>
      <el-form-item
        v-if="it.type === 'checkboxGroup'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
        style="text-align: left"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-checkbox-group v-model="ruleForm[it.name]">
          <el-checkbox
            :disabled="it.disabled"
            v-for="(item, index) in it.list"
            :key="index"
            :label="item.value"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'datePicker'"
        style="text-align: left"
        :prop="it.prop"
        :label="it.label"
        :label-width="formLabelWidth"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-date-picker
          v-model="ruleForm[it.name]"
          :disabled="it.disabled"
          :value-format="it.valueFormat || 'yyyy-MM-dd'"
          style="float: left; width: 60%"
          :type="it.dateType ? it.dateType : 'date'"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'year'"
        style="text-align: left"
        :prop="it.prop"
        :label="it.label"
        :label-width="formLabelWidth"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-date-picker
          v-model="ruleForm[it.name]"
          :disabled="it.disabled"
          value-format="yyyy"
          style="float: left; width: 60%"
          type="year"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item
        v-else-if="
          it.type === 'datetimerange' && (it.show ? it.show(it) : true)
        "
        style="text-align: left"
        :prop="it.prop"
        :label="it.label"
        :label-width="formLabelWidth"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-date-picker
          v-model="ruleForm[it.name]"
          :disabled="it.disabled"
          :format="it.format || 'yyyy-MM-dd'"
          :value-format="it.valueFormat || 'yyyy-MM-dd'"
          style="float: left; width: 60%"
          :type="'datetimerange'"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'daterange'"
        style="text-align: left"
        :prop="it.prop"
        :label="it.label"
        :label-width="formLabelWidth"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-date-picker
          v-model="ruleForm[it.name]"
          :disabled="it.disabled"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="float: left; width: 60%"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'datetime'"
        style="text-align: left"
        :prop="it.prop"
        :label="it.label"
        :label-width="formLabelWidth"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-date-picker
          v-model="ruleForm[it.name]"
          style="float: left; width: 60%"
          :value-format="it.format || 'yyyy-MM-dd'"
          :disabled="it.disabled"
          type="datetime"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'time-select'"
        style="text-align: left"
        :prop="it.prop"
        :label="it.label"
        :label-width="formLabelWidth"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <div style="width: 60%; display: flex; justify-content: space-between">
          <el-time-select
            v-model="ruleForm[it.name][0]"
            placeholder="起始时间"
            :clearable="false"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:59',
              maxTime: ruleForm[it.name][1],
            }"
            style="width: 48%"
          >
          </el-time-select>
          <div class="line">~</div>
          <el-time-select
            placeholder="结束时间"
            v-model="ruleForm[it.name][1]"
            :clearable="false"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:59',
              minTime: ruleForm[it.name][0],
            }"
            style="width: 48%"
          >
          </el-time-select>
        </div>
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'select-tree'"
        :prop="it.prop"
        :label="it.label"
        :label-width="formLabelWidth"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <select-tree
          :value="ruleForm[it.name]"
          :v-model="ruleForm[it.name] || ''"
          :props="
            it.props || {
              value: 'id',
              label: 'name',
              children: 'children',
            }
          "
          :setCheckedKeys="ruleForm[it.name]"
          :data="it.list"
          :list="it.list"
          :clearable="true"
          :placeholder="it.placeholder"
          :url="it.url"
          :accordion="true"
          :showCheckbox="true"
          @getValue="getTreeValue(it, arguments)"
          style="float: left; width: 60%"
        />
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'city-picker'"
        :prop="it.prop"
        :label="it.label"
        :label-width="formLabelWidth"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <city-picker
          style="width: 60%"
          :ischeckTwo="true"
          :value="ruleForm[it.name]"
          :clearable="true"
          :accordion="true"
          :isCheckPreTwo="it.isCheckPreTwo"
          @getValue="
            (value) => {
              ruleForm[it.name] = value;
            }
          "
          @getLabel="
            (value) => {
              ruleForm[`${it.name}Str`] = value;
            }
          "
        />
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'textarea'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <el-input
          class="custom-input"
          style="float: left; width: 60%"
          v-model="ruleForm[it.name]"
          :placeholder="it.placeholder"
          :disabled="it.disabled"
          autocomplete="off"
          type="textarea"
          :maxlength="it.maxlength || 100"
          show-word-limit
          :autosize="{ minRows: it.minRows ? it.minRows : 4 }"
        />
      </el-form-item>
      <!-- 富文本 -->
      <el-form-item
        v-else-if="it.type === 'editor'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <editor
          v-model="ruleForm[it.name]"
          :min-height="192"
          style="width: 60%"
        />
      </el-form-item>
      <!-- 图片上传、文件上传、视频上传 -->
      <el-form-item
        v-else-if="it.type === 'imageUpload' && (it.show ? it.show(it) : true)"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <ImageUpload
          v-model="ruleForm[it.name]"
          :limit="it.limit || 1"
          :file-size="it.fileSize || 5"
          :is-show-tip="false"
          :need-cropper="it.needCropper"
          :file-type="it.fileType"
          :tips-text="it.tipsText"
        />
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'fileUpload'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>
        <FileUpload
          v-model="ruleForm[it.name]"
          :limit="it.limit || 1"
          :file-size="it.fileSize || 5"
          :is-show-tip="false"
          :file-type="it.fileType"
          :tips-text="it.tipsText"
          @upload-progress="it.uploadProgress($event)"
        />
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'videoUpload'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <template v-slot:label v-if="it.tooltip">
          <span style="margin-right: 5px">{{ it.label }}</span>
          <el-tooltip :content="it.tooltip" placement="top-start">
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </template>

        <VideoUpload
          v-model="ruleForm[it.name]"
          :file-size="it.fileSize || 100"
          :tips-text="it.tipsText"
        />
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'inline-input'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
        style="display: flex"
      >
        <el-row style="margin-left: 12px">
          <el-col style="display: flex; white-space: nowrap; font-size: 12px">
            {{ it.preInlineText }}
            <el-input
              style="float: left; width: 100%; margin: 0 6px"
              v-if="!it.autocomplete"
              v-model="ruleForm[it.name]"
              :maxlength="it.maxlength"
              :show-word-limit="it.maxlength ? true : false"
              :placeholder="it.placeholder"
              :min="it.min ? it.min : ''"
              :max="it.max ? it.max : ''"
              :disabled="it.disabled"
              @blur="blurVal(it)"
              @focus="focus(it)"
              @change="changeNum(it)"
            />
            {{ it.nextInlineText }}
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 复合型输入框<[string,string]> -->
      <el-form-item
        v-else-if="it.type === 'append-input'"
        v-show="it.show ? it.show(it) : true"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <el-input
          style="float: left; width: 60%"
          v-if="!it.autocomplete"
          v-model="ruleForm[it.name]"
          :maxlength="it.maxlength"
          :show-word-limit="it.maxlength ? true : false"
          :placeholder="it.placeholder"
          :min="it.min ? it.min : ''"
          :max="it.max ? it.max : ''"
          :disabled="it.disabled"
          @blur="blurVal(it)"
          @focus="focus(it)"
          @change="changeNum(it)"
        >
          <el-select
            v-model="ruleForm[it.unit]"
            slot="append"
            placeholder="请选择"
            style="min-width: 70px"
          >
            <el-option
              v-for="(unit, index) in it.unitList"
              :key="unit.value"
              :label="unit.label"
              :value="unit.value"
            ></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item
        v-else-if="it.type === 'inline-input'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
        style="display: flex"
      >
        <el-row style="margin-left: 12px">
          <el-col style="display: flex; white-space: nowrap; font-size: 12px">
            {{ it.preInlineText }}
            <el-input
              style="float: left; width: 100%; margin: 0 6px"
              v-if="!it.autocomplete"
              v-model="ruleForm[it.name]"
              :maxlength="it.maxlength"
              :show-word-limit="it.maxlength ? true : false"
              :placeholder="it.placeholder"
              :min="it.min ? it.min : ''"
              :max="it.max ? it.max : ''"
              :disabled="it.disabled"
              @blur="blurVal(it)"
              @focus="focus(it)"
              @change="changeNum(it)"
            />
            {{ it.nextInlineText }}
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 复合型输入框<[string,string]> -->
      <el-form-item
        v-else-if="it.type === 'append-input'"
        v-show="it.show ? it.show(it) : true"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <el-input
          style="float: left; width: 60%"
          v-if="!it.autocomplete"
          v-model="ruleForm[it.name]"
          :maxlength="it.maxlength"
          :show-word-limit="it.maxlength ? true : false"
          :placeholder="it.placeholder"
          :min="it.min ? it.min : ''"
          :max="it.max ? it.max : ''"
          :disabled="it.disabled"
          @blur="blurVal(it)"
          @focus="focus(it)"
          @change="changeNum(it)"
        >
          <el-select
            v-model="ruleForm[it.unit]"
            slot="append"
            placeholder="请选择"
            style="min-width: 70px"
          >
            <el-option
              v-for="(unit, index) in it.unitList"
              :key="unit.value"
              :label="unit.label"
              :value="unit.value"
            ></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <!-- 插槽自定义 -->
      <el-form-item
        v-else-if="it.type === 'slot'"
        :label="it.label"
        :label-width="formLabelWidth"
        :prop="it.prop"
      >
        <slot :name="it.prop" :row="it"></slot>
      </el-form-item>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'NxForm',
  props: {
    formInput: [Array, Function],
    ruleForm: Object,
    formLabelWidth: {
      type: String,
      default: '120px',
    },
    spanNum: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      image: '',
      fileList: {},
      url: process.env.VUE_APP_SERVER_URL,
      GaodeMapKey: false,
      valueMultiple: [],
    };
  },
  watch: {
    ruleForm: {
      handler(val) {
        if (val.uuid) {
          this.GaodeMapKey = !this.GaodeMapKey;
        }
      },
      deep: true,
    },
  },
  methods: {
    getTreeValue(it, [value, q, node]) {
      if (it.goodsTypeRos) {
        this.ruleForm['goodsTypeRos'] = node.filter((item) => {
          // 数据格式够乱，martGoodsTypeVos有些是[]有些是null
          // 过滤一级分类，否则会出现勾选一级分类下的全部二级分类情况
          // 二级分类的 parentTypeId 不为 '0',且martGoodsTypeVos为[]或者null
          return (
            item.parentTypeId != 0 ||
            item.martGoodsTypeVos.length < 1 ||
            !Array.isArray(item.martGoodsTypeVos)
          );
        });
      }
      this.ruleForm[it.name] = value;
    },
    // 失去焦点事件
    blurVal(it) {
      if (it.fun) {
        it.fun(it);
      }
    },
    focus(it) {
      if (it.focus) {
        it.focus(it);
      }
    },
    // 选中下拉框树节点, 判断一下有没有传回调函数
    selectNode(node, it) {
      if (it.fun) {
        it.fun(node);
      }
    },
    // 设置min属性时 输入数值不允许为负数
    // 设置digit属性时候,输入数值不允许超过设置的位数
    changeNum(obj) {
      const { min, name, floatState, inputType, digit } = obj;
      const str = String(this.ruleForm[name]);
      const arr = str.split('.');
      if (digit === 0) {
        if (str && str.indexOf('.') !== -1) {
          if (arr.length > digit) {
            this.$message.warning(`不允许小数`);
            return (this.ruleForm[name] = arr[0]);
          }
        }
      }
      if (digit) {
        if (str && str.indexOf('.') !== -1) {
          if (arr[1].length > digit) {
            this.$message.warning(`限小数点后${digit}位`);
            this.ruleForm[name] = parseFloat(
              arr[0] + '.' + arr[1].slice(0, digit)
            );
          }
        }
      }
      if (!floatState && inputType === 'number') {
        const str = String(this.ruleForm[name]);
        if (str && str.indexOf('.') !== -1) {
          this.$message.warning('请输入整数');
          this.ruleForm[name] = parseInt(this.ruleForm[name]);
        }
      }
      if (String(min)) {
        if (Number(this.ruleForm[name]) < min) {
          this.ruleForm[name] = min;
        }
      }
    },
    // 清空文件
    clearFiles() {
      this.$refs['nxUpload'][0].clear();
    },
    // 判断传入的是数组还是函数
    ArrayTypeOf(arr) {
      return typeof arr === 'function' ? arr() : arr;
    },
    // 点击文件事件
    onPreview(file) {
      window.open(process.env.VUE_APP_SERVER_URL + file.url);
    },
    // 根据图片类型返回对应格式数据
    fileArray(item) {
      const { uploadObj, name } = item;
      const ruleForm = this.ruleForm;
      const key = name;
      const obj = {
        name: ruleForm[uploadObj.name],
        url: ruleForm[uploadObj.url],
      };
      if (uploadObj.fileType) {
        if (uploadObj.fileType !== 'image') {
          if (!this.fileList[key]) {
            this.fileList[key] = obj.url
              ? [{ name: obj.name, url: obj.url }]
              : null;
            if (obj.url) {
              //刷新当前组件
              this.$forceUpdate();
            }
            return null;
          }
          if (obj.url !== this.fileList[key][0].url) {
            this.fileList[key] = [{ name: obj.name, url: obj.url }];
            return [{ name: obj.name, url: obj.url }];
          }
          if (this.fileList[key][0].url) {
            return this.fileList[key];
          }
          return null;
        } else if (uploadObj.fileType === 'image') {
          return ruleForm[key];
        } else {
          return null;
        }
      } else {
        return null;
      }
    },
    getInput(form) {
      return Array instanceof Array ? form : form();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .custom-input .el-textarea__inner {
    min-height: 100px !important;
  }

  .el-textarea .el-input__count {
    background-color: transparent;
    bottom: -8px;
    right: 20px;
  }
}

.ypy-upload-file {
  border: 1px solid #e2e2e2;
  padding: 6px 20px;
  border-radius: 5px;
  margin-right: 5px;
}

.el-col-pull-1 {
  /* right: 0 !important;
  display: inline-table; */
}

/* .el-upload-list__item {
  transition: none !important;
} */
.input-icon {
  font-size: 25px;
  margin: 5px 2px;
}
</style>
<style>
/* 解决多选下拉框tag过长 */
.el-select__tags-text {
  display: inline-block;

  max-width: 120px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.el-select .el-tag__close.el-icon-close {
  top: -7px !important;
  right: -4px !important;
}

.el-icon-warning-outline {
  cursor: pointer;
}
</style>
